<script setup lang="ts">
import {storeToRefs} from "pinia";
import appStore from "@/store";
import { ref } from 'vue';
import {formatDate} from "@/assets/ts/utils";

const {reloadUserInfo, modifyUserInfo} = appStore.useUserInfoStore
const {userInfo} = storeToRefs(appStore.useUserInfoStore)
const setting = ref(false);

const startSetting = ()=>{
  setting.value = true;
}

const cancel = ()=>{
  reloadUserInfo();
  setting.value = false;
}

const save = ()=>{
  modifyUserInfo();
  setting.value = false;
}

const getName = ()=>{
  if(userInfo.value !== null && userInfo.value !== undefined){
    return userInfo.value.name || '未设置'
  }
  return '未设置'
}

const getIntroduction = ()=>{
  if(userInfo.value !== null && userInfo.value !== undefined){
    return  userInfo.value.introduction || '这个人很懒，什么都没留下…'
  }
  return '这个人很懒，什么都没留下…'
}

const getCreateDate = ()=>{
  if(userInfo.value !== null && userInfo.value !== undefined){
    return userInfo.value.createDate.getFullYear() + ' 年 ' + (userInfo.value.createDate.getMonth()+1) + ' 月 ' + userInfo.value.createDate.getDate() + ' 日'
  }
  return '暂无用户数据'
}

const getDuration = ()=>{
  if(userInfo.value !== null && userInfo.value !== undefined){
    return Math.floor((new Date() - userInfo.value.createDate) / (1000 * 60 * 60 * 24))
  }
  return '0'
}
</script>

<template>
  <div class="user-information-container">
    <!-- Header Section -->
    <div class="page-header">
      <div class="header-content">
        <h2 class="page-title">
          <i class="fas fa-user-circle"></i>
          个人信息
        </h2>
        <p class="page-subtitle">管理您的个人资料和基本信息</p>
      </div>
      <div class="header-actions" v-if="!setting">
        <el-button type="primary" class="edit-btn" @click="startSetting">
          <i class="fas fa-edit"></i>
          修改信息
        </el-button>
      </div>
    </div>

    <!-- Information Cards -->
    <div class="info-cards">
      <!-- Basic Information Card -->
      <div class="info-card">
        <div class="card-header">
          <h3 class="card-title">
            <i class="fas fa-id-card"></i>
            基本信息
          </h3>
        </div>
        <div class="card-content">
          <!-- Nickname Row -->
          <div class="info-row required">
            <div class="info-label">
              <span class="required-mark">*</span>
              <span class="label-text">昵称</span>
            </div>
            <div class="info-value">
              <span v-if="!setting" class="display-value">
                {{ getName() }}
              </span>
              <el-input
                  v-else
                  v-model="userInfo.name"
                  class="custom-input"
                  placeholder="请输入昵称"
              />
            </div>
          </div>

          <!-- Signature Row -->
          <div class="info-row">
            <div class="info-label">
              <span class="label-text">个性签名</span>
            </div>
            <div class="info-value">
              <span v-if="!setting" class="display-value">
                {{ getIntroduction() }}
              </span>
              <el-input
                  v-else
                  v-model="userInfo.introduction"
                  class="custom-input"
                  type="textarea"
                  :rows="2"
                  placeholder="写下您的个性签名"
              />
            </div>
          </div>

          <!-- Birthday Row -->
          <div class="info-row">
            <div class="info-label">
              <span class="label-text">生日</span>
            </div>
            <div class="info-value">
              <span v-if="!setting && userInfo !== null && userInfo !== undefined && userInfo.birthday" class="display-value">
                {{formatDate(new Date(userInfo.birthday))}}
              </span>
              <span v-else-if="!setting" class="display-value empty">
                未设置
              </span>
              <el-date-picker
                  v-else
                  v-model="userInfo.birthday"
                  class="custom-date-picker"
                  placeholder="选择生日"
                  format="YYYY年MM月DD日"
                  value-format="YYYY-MM-DD"
              />
            </div>
          </div>
        </div>
      </div>

      <!-- Account Information Card -->
      <div class="info-card">
        <div class="card-header">
          <h3 class="card-title">
            <i class="fas fa-calendar-alt"></i>
            账号信息
          </h3>
        </div>
        <div class="card-content">
          <!-- Registration Date Row -->
          <div class="info-row">
            <div class="info-label">
              <span class="label-text">注册日期</span>
            </div>
            <div class="info-value">
              <span class="display-value">
                {{ getCreateDate() }}
              </span>
              <span class="registration-badge">
                <i class="fas fa-star"></i>
                已注册 {{ getDuration() }} 天
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Action Buttons -->
    <div class="action-section" v-if="setting">
      <div class="action-buttons">
        <el-button type="info" class="cancel-btn" @click="cancel">
          <i class="fas fa-times"></i>
          取消
        </el-button>
        <el-button type="success" class="save-btn" @click="save">
          <i class="fas fa-check"></i>
          保存更改
        </el-button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css';

.user-information-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 25px 30px;
  background: linear-gradient(135deg, rgba(100, 181, 246, 0.1), rgba(144, 202, 249, 0.05));
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);

  .header-content {
    .page-title {
      color: #ffffff;
      font-size: 1.8rem;
      font-weight: 600;
      margin: 0 0 8px 0;
      display: flex;
      align-items: center;
      gap: 12px;

      i {
        color: #64b5f6;
        font-size: 1.6rem;
      }
    }

    .page-subtitle {
      color: #bdc3c7;
      font-size: 0.95rem;
      margin: 0;
    }
  }

  .header-actions {
    .edit-btn {
      background: linear-gradient(135deg, #64b5f6, #42a5f5);
      border: none;
      border-radius: 25px;
      padding: 12px 24px;
      font-weight: 500;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(100, 181, 246, 0.3);
      }

      i {
        margin-right: 8px;
      }
    }
  }
}

.info-cards {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.info-card {
  background: rgba(52, 73, 94, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;

  &:hover {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  }

  .card-header {
    padding: 20px 30px;
    background: rgba(100, 181, 246, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    .card-title {
      color: #ffffff;
      font-size: 1.2rem;
      font-weight: 600;
      margin: 0;
      display: flex;
      align-items: center;
      gap: 10px;

      i {
        color: #64b5f6;
        font-size: 1.1rem;
      }
    }
  }

  .card-content {
    padding: 25px 30px;
  }
}

.info-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 25px;
  min-height: 40px;

  &:last-child {
    margin-bottom: 0;
  }

  &.required .label-text {
    font-weight: 600;
  }

  .info-label {
    flex: 0 0 120px;
    display: flex;
    align-items: center;
    padding-top: 8px;

    .required-mark {
      color: #e74c3c;
      font-weight: bold;
      margin-right: 4px;
    }

    .label-text {
      color: #f5f5f5;
      font-size: 0.95rem;
      font-weight: 500;
    }
  }

  .info-value {
    flex: 1;
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding-top: 8px;
    padding-bottom: 8px;

    .display-value {
      color: #ffffff;
      font-size: 1rem;
      line-height: 1.5;
      min-height: 24px;

      &.empty {
        color: #95a5a6;
        font-style: italic;
      }
    }

    .registration-badge {
      align-items: center;
      gap: 6px;
      background: linear-gradient(135deg, #f39c12, #e67e22);
      color: white;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 0.8rem;
      font-weight: 500;
      width: fit-content;

      i {
        font-size: 0.7rem;
      }
    }
  }
}

// Custom Element Plus component styling
:deep(.custom-input) {
  .el-input__wrapper {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    transition: all 0.3s ease;

    &:hover {
      border-color: rgba(100, 181, 246, 0.5);
    }

    &.is-focus {
      border-color: #64b5f6;
      box-shadow: 0 0 0 2px rgba(100, 181, 246, 0.2);
    }
  }

  .el-input__inner {
    color: #ffffff;
    font-size: 0.95rem;

    &::placeholder {
      color: #95a5a6;
    }
  }

  .el-textarea__inner {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #ffffff;
    resize: none;

    &::placeholder {
      color: #95a5a6;
    }

    &:hover {
      border-color: rgba(100, 181, 246, 0.5);
    }

    &:focus {
      border-color: #64b5f6;
      box-shadow: 0 0 0 2px rgba(100, 181, 246, 0.2);
    }
  }
}

:deep(.custom-date-picker) {
  .el-input__wrapper {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;

    &:hover {
      border-color: rgba(100, 181, 246, 0.5);
    }

    &.is-focus {
      border-color: #64b5f6;
      box-shadow: 0 0 0 2px rgba(100, 181, 246, 0.2);
    }
  }

  .el-input__inner {
    color: #ffffff;

    &::placeholder {
      color: #95a5a6;
    }
  }
}

.action-section {
  margin-top: 30px;
  padding: 25px 30px;
  background: rgba(52, 73, 94, 0.3);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);

  .action-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;

    .cancel-btn {
      background: linear-gradient(135deg, #95a5a6, #7f8c8d);
      border: none;
      border-radius: 25px;
      padding: 12px 24px;
      font-weight: 500;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(149, 165, 166, 0.3);
      }

      i {
        margin-right: 8px;
      }
    }

    .save-btn {
      background: linear-gradient(135deg, #27ae60, #2ecc71);
      border: none;
      border-radius: 25px;
      padding: 12px 24px;
      font-weight: 500;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(39, 174, 96, 0.3);
      }

      i {
        margin-right: 8px;
      }
    }
  }
}

// Responsive Design
@media (max-width: 768px) {
  .user-information-container {
    padding: 0 15px;
  }

  .page-header {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .info-row {
    flex-direction: column;
    gap: 8px;

    .info-label {
      flex: none;
      padding-top: 0;
    }
  }

  .action-buttons {
    flex-direction: column;

    .cancel-btn,
    .save-btn {
      width: 100%;
    }
  }
}

// Animation for smooth transitions
.info-card {
  animation: slideInUp 0.5s ease-out;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.info-card:nth-child(1) { animation-delay: 0.1s; }
.info-card:nth-child(2) { animation-delay: 0.2s; }
</style>